<template>
  <form @submit.prevent="handleSubmit">
    <label for="path">Path:</label>
    <input type="text" id="path" v-model="path" />
    <p v-if="!isPathValid">Path should be in the format /user/index.</p>

    <button type="submit">Submit</button>
  </form>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const path = ref('');
    const isPathValid = ref(true);

    const validatePath = () => {
      // 使用正则表达式验证路径格式
      const pathRegex = /^\/[a-zA-Z]+\/[a-zA-Z]+$/;
      isPathValid.value = pathRegex.test(path.value);
    };

    const handleSubmit = () => {
      validatePath();

      if (isPathValid.value) {
        // 处理提交逻辑
        console.log('Form submitted:', path.value);
      } else {
        // 验证失败，可以进行一些错误处理
        console.log('Form validation failed.');
      }
    };

    return { path, isPathValid, handleSubmit };
  },
};
</script>
